<template>
  <div class="leave-message-page common-page">
    <div class="message-box">
      <van-field
        v-model="content"
        rows="5"
        autosize
        type="textarea"
        placeholder="可详细描述下您出现的问题，便于我们更好的为你解决问题（必填）"
      />
    </div>
    <van-button
      round
      type="info"
      @click="saveMessage"
      :disabled="!content"
    >提交</van-button>
  </div>
</template>
<script>
import { Cell, CellGroup, Field, Button } from "vant";
import { mapGetters } from "vuex";
import Share from "./mixin/share";
import apiMessage from "@/common/api/apiMessage";

import axios from "axios";

export default {
  name: "LeaveMessage",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Button.name]: Button,
  },
  mixins: [Share],
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      content: "",
      takePhotoImg: require("../common/imgs/take-photo.png"),
      disabled: false,
      imgList: [
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
        "https://img01.yzcdn.cn/vant/cat.jpeg",
      ],
      fileList: [],
      region: "cn-beijing", //上传到视频点播的地域，默认值为'cn-shanghai'
      userId: "LTAI5t64uTGgbYUGzeNiWfVi",
      timeout: "",
      partSize: "", //分片大小默认1 MB，不能小于100 KB
      parallel: 3, //并行上传分片个数，默认5
      retryCount: 3, //网络原因失败时，重新上传次数，默认为3
      retryDuration: 2, //网络原因失败时，重新上传间隔时间，默认为2秒
      file: null,
      authProgress: 0,
      uploadDisabled: true,
      resumeDisabled: true,
      pauseDisabled: true,
      uploader: null,
      statusText: "",
    };
  },
  created() {
    this.setShare();
  },
  mounted() {},
  methods: {
    saveMessage() {
      this.$toast.loading();
      apiMessage
        .saveMessageInfo({
          content: this.content,
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.$router.back();
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.message-box {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  .van-cell::after {
    display: none;
  }
}
.photograph-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 30px 30px 0 30px;
  box-sizing: border-box;
  .take-photo {
    width: 120px;
    height: 120px;
    position: relative;
    background: #f9f9f9;
    border-radius: 8px;
    border: 2px solid #eaeaf1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    margin-right: 30px;
    img {
      width: 56px;
      height: 56px;
    }
  }
  .photo-img-list-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .photo-img-list {
    border: none;
    background: none;
    img {
      width: 100%;
      height: 100%;
    }
    .van-icon-clear {
      position: absolute;
      top: -18px;
      right: -18px;
      font-size: 36px;
      color: red;
    }
  }
}
.van-button {
  width: 100%;
  margin: 60px 0 24px 0;
}
.tips-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  span {
    font-size: 26px;
    font-weight: 400;
    color: #888888;
    line-height: 36px;
  }
  div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    span:nth-child(2) {
      color: #3b6bd8;
    }
  }
}
</style>
